<template>
  <div class="container">
    <!--查询条件-->
    <div class="search-box" ref="queryForm">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="字典类型">
          <el-input v-model="search.type" size="small" clearable placeholder="请输入字典类型"></el-input>
        </el-form-item>
        <el-form-item label="字典名称">
          <el-input v-model="search.name" size="small" clearable placeholder="请输入字典名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getTableList">查询</el-button>
          <el-button type="default" size="small" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--查询条件-->

    <!--操作-->
    <div class="operate-box" style="margin: 15px 0;" ref="add">
      <el-button type="primary" size="small" plain icon="el-icon-plus" @click="handleAdd">新增</el-button>
      <el-button type="danger" size="small" plain icon="el-icon-minus" @click="handleDelete(1,'')">删除</el-button>
    </div>
    <!--操作-->

    <!--表格-->
    <el-table ref="elTable" :data="list" size="small" stripe :height="listHeight || fillHeight('listHeight',['queryForm','add','pagination'],['hamburger-container','tags-view-container'], 120)" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="55"></el-table-column>
      <el-table-column prop="type" label="字典类型"></el-table-column>
      <el-table-column prop="name" label="字典名称"></el-table-column>
      <el-table-column prop="remark" label="字典描述" show-overflow-tooltip></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click.native.prevent="handleEdit(scope.row.id, 'edit')" type="text" size="small">编辑</el-button>
          <el-button @click.native.prevent="handleDelete(2,scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--表格-->

    <!--分页-->
    <div class="page-box" ref="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[10,20,50,100, 200, 300, 400]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
    <!--分页-->

    <!--新增&&编辑窗口-->
    <el-dialog title="新增" :visible.sync="dialogFormVisible" width="80%">
      <div class="context-warp">
        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>字典类型</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model="form.type" size="small"></el-input>
          </div>
        </div>

        <div class="page-form-item">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>字典名称</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model="form.name" size="small"></el-input>
          </div>
        </div>

        <div class="page-form-item" style="width: 50%;">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>字典描述</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model="form.remark" size="small"></el-input>
          </div>
        </div>
      </div>

      <div style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <el-button size="small" type="primary" @click="handleAddItemClick">新增</el-button>
      </div>

      <el-table :data="form.sysDicts" border>
        <el-table-column fixed="left" label="序号" width="50">
          <template slot-scope="scope" >
            <span type="text" >{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型名称">
          <template slot-scope="scope" >
            <el-input  size="small" v-model="scope.row.typeName" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="类型值">
          <template slot-scope="scope" >
            <el-input  size="small" v-model="scope.row.value" placeholder="请输入"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="排序">
          <template slot-scope="scope" >
            <el-input  type="number" size="small" v-model="scope.row.sort" placeholder="请输入"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="danger" size="small" @click="handleDeleteItemClick(scope.$index)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增&&编辑窗口-->

  </div>
</template>

<script>
  import { getTableListApi, getDetailInfoApi, addAndUpdateApi, deleteApi } from "@/api/system/dictionary";
  import { restObject } from '../../../utils/index'
  import BaseIndex from "@/views/base/BaseIndex";
  import {newWindowBpm} from "@/utils/openBpm";
  import Index from "./index";
  export default {
    name: "Dictionary",
    extends: BaseIndex,
    data() {
      return {
        search: { type:'', name: '' },//查询条件
        listHeight:0,
        list: [],
        selectedList: [],//选中项
        page:{pageNum:1, pageSize:10, total:100},//分页
        dialogFormVisible:false,
        id:'',//当前查看编辑的id
        form:{
          type:'',
          name:'',
          remark:'',
          sysDicts:[],
        },
      }
    },

    created(){
      this.getTableList();
    },

    methods:{


      /**
       * 获取表格数据
       */
      getTableList(){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        getTableListApi(this.search,this.page).then(res => {
          console.log('列表:',res);
          loading.close();
          if(res.code === 0){
            const { records, total } = res.data;
            this.list = records;
            this.page.total = total;
          }else{
            this.$message.warning(res.msg)
          }
        }).catch(error => {
          console.log('error:',error);
          loading.close();
        })
      },

      /**
       * 获取详情
       */
      getDetailInfo(){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        getDetailInfoApi(this.id).then(res => {
          console.log('详情:',res);
          loading.close();
          if(res.code === 0){
            this.form = res.data;
          }else{
            this.$message.warning(res.msg)
          }
        }).catch(error => {
          console.log('error:',error);
          loading.close();
        })
      },



      /**
       * 新增 && 编辑
       */
      addAndUpdate(data){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        addAndUpdateApi(data).then(res => {
          console.log('新增&&编辑:',res);
          loading.close();
          if(res.code === 0){
            this.$message.success("操作成功!");
            this.dialogFormVisible = false;
            this.getTableList();
          }else{
            this.$message.warning(res.msg)
          }
        }).catch(error => {
          console.log('error:',error);
          loading.close();
        })
      },




      /**
       *重置
       */
      handleReset(){
        restObject(this.search);
        this.getTableList();
      },

      /**
       *新增
       */
      handleAdd(){
        this.id = "";
        this.form.type = '';
        this.form.name = '';
        this.form.remark = '';
        this.form.sysDicts = [];
        this.dialogFormVisible = true;
      },

      /**
       *编辑
       * @param id
       */
      handleEdit(id){
        this.dialogFormVisible = true;
        this.id = id;
        this.getDetailInfo(id);
      },


      /**
       * 删除
       */
      deleteItem(ids){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        deleteApi(ids).then(res => {
          console.log('删除:',res);
          loading.close();
          if(res.code === 0){
            this.$message.success('删除成功');
            this.getTableList();
          }else{
            this.$message.warning(res.msg);
          }

        }).catch(error => {
          loading.close();
          console.log('error:',error);
        })
      },

      /**
       *删除点击事件
       */
      handleDelete(type,data){
        debugger
        let ids = [];
        let canDelete = true;
        if(type===1){//批量删除
          if(!this.selectedList.length){
            this.$message.warning("请选中要删除的项!");
            canDelete = false;
          }else{
            for(let i=0;i<this.selectedList.length;i++){
              const { id } = this.selectedList[i];
              ids.push(id);
            }
          }
        }else{//单删
          const { id } = data;
          ids = [id];
        }
        if(canDelete){
          this.$confirm('确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteItem(ids);
          })
        }
      },

      /**
       *复选框事件
       * @param val
       */
      handleSelectionChange(val) {
        this.selectedList = val;
      },

      /**
       *pageSize切换事件
       * @param val
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page.pageSize = val;
        this.getTableList();
      },

      /**
       *分页切换
       * @param val
       */
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.pageNum = val;
        this.getTableList();
      },


      //============================新增&&编辑窗口===================================

      /**
       * 判断是否英文字母
       */
      isWord(str){
        const re = new RegExp("^[a-zA-Z]+$");
        if (re.test(str)) {
          return true
        } else {
          return false
        }
      },

      /**
       * 数据校验
       */
      checkData(){
        const { type, name, remark, sysDicts } = this.form;
        debugger;
        let status = true;
        if(!type){
          this.$message.warning("请填写字典类型");
          status = false;
        }else if(!this.isWord(type)){
          this.$message.warning("字典类型只能为英文字母");
          status = false;
        }else if(!name){
          this.$message.warning("请填写字典名称");
          status = false;
        }else if(!remark){
          this.$message.warning("请填写字典描述");
          status = false;
        }else {
          if(!sysDicts.length){
            this.$message.warning("列表不能为空");
            status = false;
          }else{
            for(let i=0;i<sysDicts.length;i++){
              const { typeName, value, sort } = sysDicts[i];
              this.form.sysDicts[i].sort = parseInt(sort);
              if(typeName===""){
                this.$message.warning(`请填写第${i+1}行类型名称`);
                status = false;
                break
              }else if(value===""){
                this.$message.warning(`请填写第${i+1}行类型值`);
                status = false;
                break
              }else if(sort===""){
                this.$message.warning(`请填第${i+1}行写字排序`);
                status = false;
                break
              }else{
                status = true;
              }
            }
          }
        }
        return status
      },

      /**
       * 窗口新增
       */
      handleAddItemClick(){
        const item = {typeName:'',value:'',sort:''};
        this.form.sysDicts.push(item);
      },

      /**
       * 窗口删除
       */
      handleDeleteItemClick(index){
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.form.sysDicts.splice(index,1);
        })
      },

      /**
       * 窗口确定
       */
      handleConfirm(){
        const status = this.checkData();
        if(status){
          this.addAndUpdate(this.form);
        }
      },


    },


  }
</script>

<style scoped lang="scss">
  @import "../../../style/form"; //table样式
  .container{
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    .page-box{
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0;
    }
  }
</style>
